<template>
    <div>
        <div class="history" v-if="ifShowHistroy">
            <div class="top">
                <h4>历史记录</h4>
                <van-icon @click="deleteHistory" name="delete-o"></van-icon>
            </div>
            <div class="down">
                <van-tag @click="tagClick(item)" v-for="(item,index) in historyKeywordList" :key="index" plain
                         type="default">{{item}}
                </van-tag>
            </div>
        </div>

        <div class="history">
            <div class="top">
                <h4>热门搜索</h4>
            </div>
            <div class="down">
                <van-tag @click="tagClick(item.keyword)" v-for="(item, index) in hotKeywordList" :key="index" plain
                         :type="item.is_hot == 1 ? 'danger' : 'default'">{{item.keyword}}
                </van-tag>
            </div>
        </div>
    </div>
</template>

<script>
    import {ClearHistory} from '@/request/api.js'

    export default {
        name: "HistoryHot",
        data() {
            return {
                ifShowHistroy: true
            }
        },
        props: ['historyKeywordList', 'hotKeywordList'],
        created() {

        },
        methods: {
            tagClick(item) {
                this.$emit('tagClick', item)
            },
            // 历史记录删除
            deleteHistory() {
                ClearHistory().then(res => {
                    if (res.errno == 0) {
                        this.$toast.success('删除成功!');
                        setTimeout(() => {
                            this.ifShowHistroy = false
                        }, 1000)
                    }
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .history {
        padding: 0 2%;
        background: #fff;
        margin-bottom: .2rem;
        .top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: .5rem;
            font-size: .2rem;
            h4 {
                font-weight: normal;
            }
        }
        .down {
            .van-tag {
                font-size: .14rem;
                margin-right: .1rem;
                margin-bottom: .1rem;
                padding: .03rem;
            }
        }
    }
</style>